<template>
  <div class="flex flex-col h-full">
    <a-card>
      <div class="flex items-center">
        <a-button class="mr-5" type="primary" @click="router.go(-1)">返回</a-button>
        <a-descriptions class="mt-4" :column="3">
          <a-descriptions-item label="收费标准">{{ formState.chargeStdName }}</a-descriptions-item>
          <a-descriptions-item label="创建人">{{ formState.empName }}</a-descriptions-item>
          <a-descriptions-item label="创建时间"> {{ formState.createTime }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </a-card>
    <a-card class="mt-2 flex-1">
      <BaseTable :data-source="dataSource" column-code="00001181" :loading="loading" max-fill :extra-height="45">
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.dataIndex === 'xh'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'coefficient'">
            <EditCell title="数量">
              <a-input v-model:value="record.coefficient" v-input:float.2 v-input-blur:float.2 placeholder="请输入" />
            </EditCell>
          </template>
          <template v-if="column.dataIndex === 'memo'">
            <EditCell title="备注">
              <a-input v-model:value="record.memo" placeholder="请输入" />
            </EditCell>
          </template>
        </template>
        <template #footer>
          <div class="text-center sticky bottom-0">
            <a-button class="mr-5" type="primary" @click="onClickSave">保存</a-button>
          </div>
        </template>
      </BaseTable>
    </a-card>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter, useRoute } from 'vue-router'
import { post } from '@/utils/request'
import BaseTable from '@/components/BaseTable'
import EditCell from '@/components/EditCell'

const router = useRouter()
const route = useRoute()
const dataSource = ref([])
const loading = ref(false)
const formState = ref({})

const getData = async () => {
  const res = await post('/operation/chargeStandard/getChargeStandardList', { pyjm: route.query?.id, pageNum: 1, pageSize: 9999 })
  if (res.code !== 0) return message.error(res.msg)
  formState.value = res.data[0]
}
const getDataDetail = async () => {
  const { code, data, msg } = await post('/operation/chargeStandard/getChargeStandardTypeList', { chargeStdId: route.query?.id })
  if (code !== 0) return message.error(msg)
  dataSource.value = data
}
const onClickSave = async () => {
  const res = await post('/operation/chargeStandard/doSaveChargeStandardType', dataSource.value)
  if (res.code !== 0) return message.error(res.msg)
  message.success(res.msg)
  getDataDetail
}

watchEffect(() => {
  if (route && route.query?.id) {
    getData()
    getDataDetail()
  }
})
</script>

<style lang="less" scoped></style>
